{% extends 'base.html' %}
{% load  staticfiles %}
{% block aside %}
    <section class="vbox">
    <section class="scrollable">
      <section class="hbox stretch">
        <aside class="aside-lg bg-light lter b-r">
          <section class="vbox">
            <section class="scrollable">
              <div class="wrapper">
                <div class="text-center m-b m-t">
                  <a href="{% url 'user:edit_profile' %}" class="thumb-lg">
                    <img src="{{ user.avatar.url }}" class="img-circle">
                  </a>
                  <div>
                    <div class="h3 m-t-xs m-b-xs">{{ user.username }}</div>
{#                    <strong class="text-muted"><a href="{% url 'user:edit_profile' %}?next={{ request.path }}">修改资料</a></strong>#}
                  </div>
                </div>
                <div class="panel wrapper">
                  <div class="row text-center">
                    <div class="col-xs-6">
                      <a href="#">
                        <span class="m-b-xs h4 block">{{ user.fan_count }}</span>
                        <small class="text-muted">粉丝</small>
                      </a>
                    </div>
                    <div class="col-xs-6">
                      <a href="#">
                        <span class="m-b-xs h4 block">{{ user.follow_count }}</span>
                        <small class="text-muted">关注</small>
                      </a>
                    </div>
                  </div>
                </div>
                <div>
                  <small class="text-uc text-xs text-muted">关于我</small>
                  <p>Artist</p>
                  <small class="text-uc text-xs text-muted">个人简介</small>
                  <p>{{ user.summary }}</p>
                  <small class="text-uc text-xs text-muted">注册时间</small>
                  <p>{{ user.date_joined }}</p>
                  <small class="text-uc text-xs text-muted">昵称</small>
                  <p>{{ user.username }}</p>
                  <small class="text-uc text-xs text-muted">年龄</small>
                  <p>{{ user.age }}</p>
                  <small class="text-uc text-xs text-muted">邮箱</small>
                  <p>{{ user.email }}</p>
                  <div class="line"></div>
                  <small class="text-uc text-xs text-muted">联系方式</small>
                  <p class="m-t-sm">
                    <a href="#" class="btn btn-rounded btn-twitter btn-icon"><i class="fa fa-twitter"></i></a>
                    <a href="#" class="btn btn-rounded btn-facebook btn-icon"><i class="fa fa-facebook"></i></a>
                    <a href="#" class="btn btn-rounded btn-gplus btn-icon"><i class="fa fa-google-plus"></i></a>
                  </p>
                </div>
              </div>
            </section>
          </section>
        </aside>
        <aside class="bg-white">
          <section class="vbox">
            <header class="header bg-light lt">
              <ul class="nav nav-tabs nav-white">
                <li class="active"><a>实名认证</a></li>
              </ul>
            </header>
            <section class="scrollable">
              <div class="tab-content">
                <div class="container aside-xl">
                    <section id="content" class="m-t-lg wrapper-md animated fadeInUp">
                    <div class="container aside-xl">
                      <a class="navbar-brand block"><span class="h1 font-bold">实名认证</span></a>
                      <section class="m-b-lg">
                          {% csrf_token %}
                            <input type="hidden" name="csrfmiddlewaretoken" value="6bEyvPIoQ52l9X7v8VKEaWjcD2o7vgUKSFmNkeYxqZQ77JRO9Tp90yiwHKiDDcn0">
                            <p>
                                <label for="real_name">真实姓名:</label>
                                <input type="text" name="real_name" class="form-control rounded input-lg" id="real_name">
                            </p>
                            <p>
                                <label for="id_card">证件号码:</label>
                                <input type="text" name="id_card" class="form-control rounded input-lg" id="id_card">
                            </p>
                            <p>
                                <label for="id_card_positive">身份证正面:</label>
                                <input type="file" name="id_card_positive" class="form-control rounded input-lg" id="id_card_positive">
                            </p>
                            <p>
                                <label for="id_card_back">身份证背面:</label>
                                <input type="file" name="id_card_back" class="form-control rounded input-lg" id="id_card_back">
                                <input type="hidden" name="user" id="id_user">
                            </p>

                            <button onclick="user_certification()" type="button" class="btn btn-lg btn-warning lt b-white b-2x btn-block btn-rounded">
                                <i class="icon-arrow-right pull-right"></i><span class="m-r-n-lg">提交材料</span>
                            </button>
                            <input type="hidden" name="next" value="">
                      </section>
                    </div>
                    </section>
                </div>
              </div>
            </section>
          </section>
        </aside>
        <aside class="col-lg-3 b-l">
          <section class="vbox">
            <section class="scrollable padder-v">
              <div class="panel">
                <h4 class="font-thin padder">未读消息</h4>
                <ul class="list-group">
                {% for notification in request.user.notifications.unread %}
                  <li class="list-group-item">
                      <p>{{ notification.verb }}《{{ notification.target }}》</p>
                      <small class="block text-muted"><i class="fa fa-clock-o"></i> {{ notification.timesince }} 之前</small>
                  </li>
                {% empty %}
                    <li class="list-group-item">
                      <p>没有未读消息</p>
{#                      <small class="block text-muted"><i class="fa fa-clock-o"></i> {{ notification.timesince }} 之前</small>#}
                  </li>
                {% endfor %}
                </ul>
              </div>
            </section>
          </section>
        </aside>
      </section>
    </section>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script type="text/javascript">
        function user_certification() {
            var form_data = new FormData();
            form_data.append("id_card", $('#id_card').val());
            form_data.append("real_name", $('#real_name').val());
            form_data.append("id_card_positive", $('#id_card_positive')[0].files[0]);
            form_data.append("id_card_back", $('#id_card_back')[0].files[0]);

            $.ajax({
                url: "{% url 'user:certification' %}",
                type: "post",
                data: form_data,
                contentType: false,
                processData: false,
                headers: {"X-CSRFToken": $('[name="csrfmiddlewaretoken"]').val()},
                success: function (data) {
                    show_toast(data.status, data.msg, '{{ user.avatar.url }}');
                    if (data.status === 'success') {
                        window.location.href = "{% url 'user:show_profile' %}"
                    }
                },
                error: function () {
                    show_toast('error', '提交认证失败，请重试!', '{{ user.avatart.url }}')
                }

            })
        }
    </script>
{% endblock aside %}